$(function () {
    // 需求1: 获取文章分类信息，渲染到页面;
    //   因为后面有增删改，完成之后都要重新渲染，所以封装成函数！
    let layer = layui.layer;
    initArtCateList();
    // 封装
    function initArtCateList() {
        axios({
            method: 'GET',
            url: '/my/article/cates'
        }).then(res => {
            // console.log(res.data);
            if (res.data.status != 0) {
                return layer.msg(res.data.message);
            }
            // 渲染
            let arr = [];
            res.data.data.forEach(ele => {
                arr.push(`
                    <tr>		
                        <td>${ ele.Id}</td>
                        <td>${ ele.name}</td>
                        <td>${ ele.alias}</td>
                        <td>
                            <button data-id="${ ele.Id}" class="btn-edit layui-btn layui-btn-xs">修改</button>
                            <button data-id="${ ele.Id}" class="btn-dele layui-btn layui-btn-xs layui-btn-danger">删除</button>
                        </td>
                    </tr>
                `);
            });
            // 赋值: empty()删除所有子节点
            $('tbody').empty().html(arr.join(""));
        });
    }

    // 需求2: 点击按钮，弹出对话框;
    //   因为open()的打开和关闭跨域了函数，所以定义一个全局变量！
    let indexAdd = 0;
    $("#addBtn").on('click', function () {
        // 弹出层是从 layui 官网拼好的;
        indexAdd = layer.open({
            type: 1,
            title: '添加文章分类',
            area: ['500px', '260px'],
            // html中制作完成后，剪切过来
            content: `
                <form id="addForm" class="layui-form" action="">
                    <!-- 1.分类名称 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">分类名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!-- 2.分类别名 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">分类别名</label>
                        <div class="layui-input-block">
                            <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!-- 3.按钮 -->
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            `
        });
    });

    // 需求3: 点击按钮，添加文章分类;
    //       动态添加的元素，需要事件委托！
    $("body").on('submit', '#addForm', function (e) {
        // 阻止默认提交
        e.preventDefault();
        // 发送ajax
        axios({
            method: 'POST',
            url: '/my/article/addcates',
            data: $(this).serialize()
        }).then(res => {
            // 判断
            if (res.data.status != 0) {
                return layer.msg(res.data.message);
            }
            // 成功提示
            layer.msg('恭喜您，添加文章分类成功！');
            // 刷新页面
            initArtCateList();
            // 关闭弹出层
            layer.close(indexAdd);
        });
    })

    // 需求4: 点击修改按钮，弹窗; - 事件委托
    indexEdit = 0; // 修改弹窗特有的索引值;
    $("tbody").on('click', '.btn-edit', function () {
        // 弹出层是从 layui 官网拼好的;
        indexEdit = layer.open({
            type: 1,
            title: '修改文章分类',
            area: ['500px', '260px'],
            // html中制作完成后，剪切过来
            content: `
                <form lay-filter="editForm" id="editForm" class="layui-form" action="">
                    <!-- 0.Id -->
                    <input type="hidden" name="Id">
                    <!-- 1.分类名称 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">分类名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!-- 2.分类别名 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">分类别名</label>
                        <div class="layui-input-block">
                            <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!-- 3.按钮 -->
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            `
        });
        // 再点击事件的里面, 弹窗后，获取id；
        let id = $(this).attr('data-id');
        // 发送ajax，根据id获取文章分类信息
        axios({
            method: 'GET',
            // URL参数，路由参数，动态参数;
            //    / 必须保留   : 必须删除   id 换成动态值;
            url: '/my/article/cates/' + id
        }).then(res => {
            // console.log(res.data);
            if (res.data.status != 0) {
                return layer.msg(res.data.message);
            }
            // 渲染
            layui.form.val('editForm', res.data.data);
        });
    })

    // 需求5: 点击修改按钮，修改文章分类 - 事件委托;
    //   基于添加逻辑修改代码;
    $("body").on('submit', '#editForm', function (e) {
        // 阻止默认提交
        e.preventDefault();
        // 发送ajax
        axios({
            method: 'POST',
            url: '/my/article/updatecate',
            data: $(this).serialize()
        }).then(res => {
            // 判断
            if (res.data.status != 0) {
                return layer.msg(res.data.message);
            }
            // 成功提示
            layer.msg('恭喜您，修改文章分类成功！');
            // 刷新页面
            initArtCateList();
            // 关闭弹出层
            layer.close(indexEdit);
        });
    })

    // 需求6: 删除;
    $("tbody").on('click', '.btn-dele', function () {
        // 获取自定义属性
        let id = $(this).attr('data-id');
        if (id == 1 || id==2) {
            return layer.msg('第一项和第二项不能删除！');
        }
        // 弹出询问框
        layer.confirm('是否确认删除？', { icon: 3, title: '提示' }, function (index) {
            // 发送ajax
            axios({
                method: 'GET',
                //    / 必须保留   : 必须删除   id 换成动态值;
                url: '/my/article/deletecate/' + id
            }).then(res => {
                if (res.data.status != 0) {
                    return layer.msg(res.data.message);
                }
                // 成功
                initArtCateList();
                // 提示
                layer.msg("恭喜您，删除文章分类成功！");
            });
            layer.close(index);
        });
    })

});